<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /*
           预解析：
           计算机只识别 0 和 1  需要一个翻译器，把我们的代码翻译成 0  1
           我们通过js引擎进行翻译，翻译分为两步：预解析，然后执行
           预解析：预解析就是把 js里面的 变量声明 和 函数声明 提升到最前面
           然后执行： 从上往下依次执行。
           预解析： 分为两类,变量预解析(变量提升)和函数预解析(函数提升)
           变量提升：就是把所有的变量声明提升到当前作用域的最前面，不提升赋值
           函数的提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数
       */
        //  案例  1     ------------------------------
        var num = 10;
        fun();
        function fun() {
            console.log(num);
            var num = 20;
        }
        //  相当于执行了以下操作
        var num;
        function fun() {
            console.log(num);
            var num = 20;
            //  -----------
            var num;
            console.log(num);   //      undefined
            num = 20;
        }
        num = 10;
        fun();
        //  案例  2     --------------------------
        var num = 10;

        function fn() {
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn();
        //  相当于执行了以下操作
        var num;
        function fn() {
            console.log(num);
            var num = 20;
            console.log(num);
            //  -----------
            var num;
            console.log(num);       // undefined
            num = 20;
            console.log(num);       //20

        }
        num = 10;
        fn();
        //  案例  3     --------------------------
        var a = 18;
        f1();
        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '123';
        }
        //  相当于执行了以下操作
        var a;
        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '123';
            //  -----------
            var b;
            var a;
            b = 9;
            console.log(a);     // undefined
            console.log(b);     // 9
            a = '123';
        }
        a = 18;
        f1();
        //  案例  4     --------------------------
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        //  相当于执行了以下操作
        function f1() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
            //  -----------
            var a = 9;
            b = 9;
            c = 9;
            console.log(a);     //9
            console.log(b);     //9   
            console.log(c);     //9
        }
        f1();
        console.log(c);         //9
        console.log(b);         //9
        console.log(a);         //undefined





    </script>
</body>

</html>